<template>
    
    <h1>博客:{{$route.params.id}}</h1>

    <p>
        {{blogContent}}
    </p>
</template>

<script>
    export default {
        data() {
            return {
                blogContent: ""
            }
        },
        created() {
            let id = this.$route.params.id;
            this.gerBlogDataById(id);
        },
        methods: {
            gerBlogDataById(id) {
                switch (id) {
                    case "1":
                        this.blogContent = "前端必备技能";
                        break;
                    case "2":
                        this.blogContent = "javascrip很重要";
                        break;
                    case "3":
                        this.blogContent = "node是前端开发的必备条件";
                        break;
                    case "4":
                        this.blogContent = "ajax前后台数据交互";
                        break;
                    case "5":
                        this.blogContent = "vue开发框架";
                        break;
                }
            }
        }
    }
</script>